<template>
	<view class="conBox">
		<!-- 在线匹配 -->
		<image src="../../static/img/chatDetailBg.png" class="conBg"></image>
		<text class="title">在线匹配</text>
		<view class="userTitle">
			<image src="~@/static/img/chatDetail.png" mode=""></image>
			<text>Linco</text>
		</view>
		<view class="action">
			<text @click="Tochat">开始聊天</text>
		</view>
		<view class="like">
			你喜欢什么动物呀~
		</view>
		<view class="animal">
			<image src="../../static/chatDetail/animal1.png"></image>
			<image src="../../static/chatDetail/animal2.png"></image>
			<image src="../../static/chatDetail/animal3.png"></image>
		</view>
		<view class="bgBottom"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: {}
			}
		},
		methods: {
			async Tochat() {
				const res = await this.$myRequest({
					url: "/match/matching",
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
					},
				})
				console.log(res.data)
				if (res.data.code == 500) {
					uni.showModal({
						title: '匹配失败',
						content: res.data.msg,
						showCancel: false,
						confirmText: '确定'
					});
				} else if (res.data.code == 200) {
					this.res = res.data.data
					this.addFriend()
					let {
						fuserId,
						userId,
						username,
						image
					} = res.data.data
					image = 'http://localhost:3000/upload/' + image
					uni.navigateTo({
						url: `/pages/chatAction/chatAction?fid=${userId}&img=${image}&name=${username}`
					})
				}

			},
			addFriend() {
				if (this.res) {
					console.log(this.res)
					let {
						fuserId,
						userId,
					} = this.res
					// #ifdef H5
					let url = "http://localhost:8080/api/chat/addFriend"
					// #endif
					// #ifdef MP-WEIXIN
					let url = "http://localhost:3000/chat/addFriend"
					// #endif
					uni.request({
						url: 'http://localhost:8080/api/chat/addFriend',
						method: "POST",
						data: {
							userId: fuserId,
							friendId: userId
						},
						success: result => {
							console.log(result)
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.conBox {
		width: 750rpx;
		height: 1624rpx;
		text-align: center;

		.conBg {
			position: fixed;
			width: 100%;
			height: 100%;
			top: -2rpx;
			left: -2rpx;
			z-index: -1;
		}

		.title {
			position: relative;
			top: 388rpx;
			color: rgba(168, 171, 159, 1);
			font-size: 56rpx;
		}

		.userTitle {

			image {
				margin: 592rpx auto 34rpx;
				width: 220rpx;
				height: 220rpx;
			}

			text {
				display: block;
				color: rgba(168, 172, 158, 1);
				font-size: 56rpx;
			}
		}


		.action {
			width: 244rpx;
			height: 84rpx;
			margin: 46rpx auto 0;
			border-radius: 40rpx;
			background-color: rgba(168, 172, 158, 1);
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			text-align: center;

			text {
				height: 84rpx;
				line-height: 84rpx;
			}
		}

		.like {
			margin: 68rpx auto 0rpx;
			width: 400rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 104rpx;
			background-color: #A8AC9E;
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			text-align: center;
			border: 2rpx solid rgba(187, 187, 187, 1);
		}

		.animal {
			margin-top: 64rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			image {
				width: 160rpx;
				height: 160rpx;
			}

			image:nth-last-child(1) {
				width: 118rpx;
				height: 156rpx;
			}
		}

		.bgBottom {
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			width: 750rpx;
			height: 514rpx;
			background: linear-gradient(179.4deg, rgba(180, 207, 139, 1) 28.76%, rgba(117, 23, 203, 0.16) 100.43%, rgba(207, 101, 113, 0.66) 100.43%, rgba(117, 23, 23, 0) 26.2%);
			z-index: -2;
		}
	}
</style>
